<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-IsFood__isfood">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            placeholder="请输入航班次/船名"
            clearable
            @clear="clearContent"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form>
      <el-collapse
        v-if="!RealtimeShipPosition.length"
        @change="
          (e) => {
            changeCollapse(e);
          }
        "
        v-model="activeName"
        accordion
      >
        <el-collapse-item
          :title="item.tagName"
          :name="index"
          v-for="(item, index) in shipInfo"
          :key="index"
        >
          <el-table
            :data="lineNoList"
            style="width: 100%"
            row-key="id"
            border
            :load="load"
          >
            <el-table-column
              prop="lineNo"
              header-align="center"
              align="center"
              label="航班次"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="sailTime"
              header-align="center"
              align="center"
              label="开船时间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="embarkPortName"
              header-align="center"
              align="center"
              label="上船码头"
            >
            </el-table-column>
            <el-table-column
              prop="shipName"
              header-align="center"
              align="center"
              label="船名"
            >
            </el-table-column>
            <el-table-column
              prop="lineStateName"
              header-align="center"
              align="center"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              header-align="center"
              align="center"
              min-width="180"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="GetrealtimeShipPosition(scope.row, scope.$index)"
                  >查看轨迹图</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <div v-else>
        <el-table
          :data="RealtimeShipPosition"
          style="width: 100%"
          row-key="id"
          border
          :load="load"
        >
          <el-table-column
            prop="lineNo"
            header-align="center"
            align="center"
            label="航班次"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="sailTime"
            header-align="center"
            align="center"
            label="开船时间"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="startPortName"
            header-align="center"
            align="center"
            label="上船码头"
          >
          </el-table-column>
          <el-table-column
            prop="shipName"
            header-align="center"
            align="center"
            label="船名"
          >
          </el-table-column>
          <el-table-column
            prop="lineStateName"
            header-align="center"
            align="center"
            label="状态"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            align="center"
            min-width="180"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="GetrealtimeShipPosition(scope.row, scope.$index)"
                >查看导览图</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :visible.sync="mapShow" title="导览图" top="70px">
        <mapdiv
          ref="mapDiv"
          style="width: 96%; margin: 0 auto 20px"
          :longitude="RealtimeShipPositionData.startLon"
          :latitude="RealtimeShipPositionData.startLat"
          @getPos="getPosVal($event)"
        >
        </mapdiv>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
// import AddOrUpdate from "./food-add-or-update";
import mapdiv from "./map";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      longitude: "",
      latitude: "",
      mapShow: false,
      mixinViewModuleOptions: {
        getDataListURL: "/sys/isspecialfood/page",
        getDataListIsPage: true,
        exportURL: "/sys/isspecialfood/export",
        deleteURL: "/sys/isspecialfood",
        deleteIsBatch: true,
      },
      dataForm: {
        name: "",
      },
      activeName: "1",
      shipInfo: [],
      lineNoList: [],
      RealtimeShipPosition: [],
      RealtimeShipPositionData: {},
      endPortNum: "",
      startPortNum: "",
    };
  },
  created() {
    this.getPortLineList();
  },
  components: {
    mapdiv,
  },
  methods: {
    GetrealtimeShipPosition(row, index) {
      // 获取当前时间
      var currentTime = new Date();
      // 设置约定时间
      var appointmentTime = new Date(row.sailDateTime);
      if (currentTime > appointmentTime) {
        // 比较当前时间和约定时间
        window.open(
          "https://i.ringzle.com/h5/#/Satelliteimage?lineNum=" +
            row.lineNum +
            "&startPortNo=" +
            row.startPortNo +
            "&sx=" +
            row.sx +
            "&endPortNo=" +
            row.endPortNo,
          "_blank"
        );
      } else {
        this.$message({
          type: "warning",
          message: "航班未出发！",
        });
      }
    },
    shipMap(row) {
      console.log(row, "row");
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    clearContent() {
      this.getPortLineList();
      this.RealtimeShipPosition = [];
    },
    getDataList: function () {
      this.search(this.dataForm.name);
    },
    search(value) {
      this.$http
        .post("/travel/shiprealtimeposition/searchShip", {
          searchBox: value,
        })
        .then((res) => {
          try {
            if (res.data.code == 0) {
              this.RealtimeShipPosition = res.data.data;
            } else {
              this.getPortLineList();
              this.RealtimeShipPosition = [];
            }
          } catch (error) {
            this.$message({
              type: "info",
              message: error,
            });
          }

          console.log(res, "***********");
        });
    },
    changeCollapse(e) {
      const item = this.shipInfo[e];
      this.getLineNo(item);
      console.log(e, "eeeeeee");
    },
    getPortLineList() {
      this.$http
        .get("/travel/shiprealtimeposition/portLineList", { params: {} })
        .then((res) => {
          console.log(res, "resresresres++++++");
          if (res.data.code == 0) {
            this.shipInfo = res.data.data;
          }
        });
    },
    // 点击查询航班次
    getLineNo(item) {
      console.log("itemitemitem", item);
      this.endPortNum = item.endPortNum;
      this.startPortNum = item.startPortNum;
      const params = {
        endPortNo: item.endPortNum,
        startPortNo: item.startPortNum,
      };
      this.$http
        .post("/travel/shiprealtimeposition/flightList", params)
        .then((res) => {
          if (res.data.code == 0) {
            this.lineNoList = res.data.data;
            console.log(res, "11111");
          }
        });
    },
    getChildrenItem() {},
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: "2016-05-01",
            name: "王小111虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 32,
            date: "2016-05-01",
            name: "王2222虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ]);
      }, 1000);
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-collapse-item__header {
  font-size: 14px;
}
</style>
